<template>
    <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="page.query.pagecurrent"
        :page-size="page.query.pagesize"
        layout="prev, pager, next"
        next-text="下一页"
        prev-text="上一页"
        :total="page.total">
    </el-pagination>
</template>

<script>
export default {
    name: 'fenye',
    props: {
        page: {
            type: Object,
            default: () => {
                return {
                    total: 0,
                    query: {
                        pagesize: 5,
                        pagecurrent: 1
                    }
                }
            }
        }
    },
    data() {
        return {
            datalist: [],
            pagesize: 5,
            pageNum: 1
        }
    },
    methods: {
        currentPage() {

        },
        // 当前页change
        handleCurrentChange (val) {
            this.page.query.pagecurrent = val;
            this.$emit("pagination", this.page);
        }
    }
}
</script>

<style lang="less" scoped>
    .el-pagination {
        text-align: center;
        padding: 10px 0px;
        // background: black;
        /deep/ .btn-next,
        /deep/ .btn-prev {
            padding: 0 20px;
        }
    }
    .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active {
        background-color: #1520be;
        border-color: #1520be;
    }
    .el-pagination.is-background /deep/ .btn-next,
    .el-pagination.is-background /deep/ .btn-prev,
    .el-pagination.is-background /deep/ .el-pager li {
        background-color: #090f42;
        color: #fff;
        border: 1px solid #1a2497;
    }
</style>